<template>
	<ma-body>
		<div slot="header">
			<ma-header type="1" title="九歌灵藏"></ma-header>
			<!-- 顶部标题 -->
			<div class="collectionTop">
				<div class="line"></div>
				<div class="topTitle">
					<p>交易记录</p>
					<span>TRANSACTION RECORD</span>
				</div>
			</div>
		</div>
		<ma-refresh slot="content">
			<div class="tran_detail">
				<div class="tran_div" v-for="item in 3">
					<div class="tranSon">
						<div class="portrait">
							<image src="../../../static/img/swiper.jpg" mode="aspectFill"></image>
						</div>
						<div class="right1">
							<p>莱姆LAIMU</p>
							<span>买入/获赠</span>
						</div>
					</div>
					<div class="price_div">
						<p class="price">￥<span>29.00</span></p>
						<p class="dates">2022/6/18</p>
					</div>
				</div>
			</div>
		</ma-refresh>

	</ma-body>
</template>

<script>
	export default {
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss">
	// 顶部标题
	.collectionTop {
		display: flex;
		flex-direction: row;
		padding: 17.07vw 0 0 5.33vw;

		.line {
			width: 1.07vw;
			height: 17.07vw;
			background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
			margin-right: 3.2vw;
		}

		.topTitle {
			height: 17.07vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			p {
				font-size: 8vw;
				font-weight: 500;
				color: #FFFFFF;
			}

			span {
				font-size: 4.27vw;
				font-weight: 300;
				color: #555555;
			}
		}
	}

	.tran_detail {
		width: 100vw;
		height: 146.13vw;
		background-color: #1b1b1b;
		margin-top: 12.8vw;
		border-radius: 6vw 6vw 0 0;
		padding: 8.53vw 0 0 0;
		display: flex;
		flex-direction: column;

		// margin: 12.8vw 0 0 5.33vw;
		.tran_div {
			width: 94.67vw;
			height: 17.07vw;
			background-color: #000000;
			border-radius: 13vw 0 0 13vw;
			margin: 0 0 2.67vw 5.33vw;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.tranSon {
				height: 10.67vw;
				margin: 3.2vw 0 3.2vw 4.27vw;
				display: flex;
				flex-direction: row;

				.portrait {
					width: 10.67vw;
					height: 10.67vw;
					margin-right: 2.13vw;
					background-color: #f8f8f8;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 10.67vw;
						height: 10.67vw;
					}
				}

				.right1 {
					height: 10.67vw;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					p {
						font-size: 3.73vw;
						font-weight: 500;
						color: #EFEFEF;
					}

					span {
						font-size: 3.2vw;
						font-weight: 300;
						color: #555555;
					}
				}
			}

			.price_div {
				height: 10.67vw;
				margin: 3.47vw 5.33vw 3.47vw 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.price {
					color: #A972FF;
					font-weight: 500;
					font-size: 2.67vw;

					span {
						font-size: 3.73vw;
						font-weight: 500;
					}
				}

				.dates {
					font-size: 3.2vw;
					font-weight: 300;
					color: #555555;
				}
			}
		}
	}
</style>
